<div>
	<div class="table" ng-controller="StudentSocialBehaviourEditableGrid">
		<div class="panel panel-primary">
			<!-- Default panel contents -->
			<!-- <div class="panel-heading">Search</div> -->
			<div class="panel-body">
			<form novalidate class="simple-form">
				<table class="table table-condensed">
					<tr>
						<td width="5%">Grade</td>
						<td width="10%"><select class="form-control input-sm" ng-model="searchCriteria.gradeId" ng-change="criteriaChanged()" ng-options="c.id as c.value for c in gradeList"></select></td>
						<td width="5%">Term</td>
						<td width="10%"><select class="form-control input-sm" ng-model="searchCriteria.termId" ng-change="criteriaChanged()" ng-options="t.id as t.value for t in termList"></select></td>
						<td width="5%"></td>
						<td><button type="button" class="btn btn-success btn-sm" ng-click="getDetails()">Get
								Details</button></td>
					</tr>
				</table>
			</form>
			</div>
		</div>
		<div class="panel panel-primary" ng-show="showGrid">
		<!-- Button trigger modal -->
			<!-- Default panel contents -->
			<div class="panel-heading">Student Social Behaviour and Personal Details</div>
			<div class="panel-body">
				<table class="table">
					<tr>
						<td colspan="8">
							<div class="table">
								<div>
									<form editable-form name="studentSocialBehaviourForm" onaftersave="saveTable()"
										oncancel="cancel()">
										<!-- table -->
										<table
											class="table table-bordered table-hover table-condensed">
											<tr style="font-weight: bold; background-color: #f4f4f4;">
												<td style="width: 40%">Subject</td>
												<td style="width: 25%">Grades Points</td>
												<td style="width: 5%">Weightage</td>
												<td style="width: 30%">Remarks</td>
												<td style="width: 10%"><span
													ng-show="studentSocialBehaviourForm.$visible">Action</span></td>
											</tr>
											<tr ng-repeat="socialBehaviourVo in socialBehaviourVos | filter:filterSocialBehaviours">
												<td>
													<!-- editable username (text with validation) --> <span
													editable-select="socialBehaviourVo.socialBehaviourId" e-form="studentSocialBehaviourForm"
													e-ng-options="s.id as s.behaviour for s in socialBehaviourList"
													>{{showSocialBehaviour(socialBehaviourVo)}}</span>
												</td>
												<td>
												<span
													editable-select="socialBehaviourVo.gradePointId" e-form="studentSocialBehaviourForm"
													e-ng-options="s.id as s.value for s in gradePoints"
													>{{showGradePoint(socialBehaviourVo)}} </span>
          										</td>
          										<td>
          										<span editable-text="socialBehaviourVo.attributeWeightage" e-form="studentSocialBehaviourForm">
            									{{ socialBehaviourVo.attributeWeightage || '' }}
          										</span></td>
          										</td>
          										<td>
          										<span editable-textarea="socialBehaviourVo.remarks" e-form="studentSocialBehaviourForm">
            									{{ socialBehaviourVo.remarks || '' }}
          										</span></td>
          										</td>
												<td><button type="button" ng-show="studentSocialBehaviourForm.$visible"
														ng-click="deleteSocialBehavRow(socialBehaviourVo.cid, socialBehaviourVo.sid)"
														class="btn btn-danger pull-right">Del</button></td>
											</tr>
										</table>
										<!-- buttons -->
										<div class="btn-edit">
											<button type="button" class="btn btn-default"
												ng-show="!studentSocialBehaviourForm.$visible" ng-click="studentSocialBehaviourForm.$show()">
												edit</button>
										</div>
										<div class="btn-form" ng-show="studentSocialBehaviourForm.$visible">
											<button type="button" ng-disabled="studentSocialBehaviourForm.$waiting"
												ng-click="addSocialBehavRow()" class="btn btn-default pull-right">add
												row</button>
											<button type="submit" ng-disabled="studentSocialBehaviourForm.$waiting"
												class="btn btn-primary">save</button>
											<button type="button" ng-disabled="studentSocialBehaviourForm.$waiting"
												ng-click="studentSocialBehaviourForm.$cancel()" class="btn btn-default">cancel</button>
										</div>
									</form>
								</div>
							</div>
						</td>
					</tr>
				</table>
				<div class="panel  panel-default">
					<div class="panel-heading">
						Recommendations
						<button data-toggle="modal" data-target="#recommendationModule" class="btn btn-sm btn-success pull-right" ng-click="initRecommendations(searchCriteria)">Add recommendations</button>
					</div>
					<div class="Panel-body">
						<div style="font-size: 12px">
							<div ng-show="showRecommendation==true">
								<p class="message " ng-repeat="row in recommendations">
									<a class="name" href="#" data-toggle="modal" data-target="#recommendationModule" ng-click="initRecommendations(searchCriteria,row)">{{row.recommendationtitle || 'No Title'}}</a><br> <span ng-attr-id="{{ 'rdiv-' + $index }}">{{row.recommendationText || 'No Text'}}</span>
								</p>
							</div>
							<div class="row" ng-show="showRecommendation==false">No Recommendations Added</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>